<template>
  <div class="content-tag" v-loading="loading" @drop="copyDrop($event)" @dragover="allowDrag($event)">
    <div class="no-data-box" v-if="tagIdList.length === 0">
      <div class="plus-box">
        <i class="el-icon-plus"></i>
      </div>
      <span>将标签拖入此区域，添加客群画像</span>
    </div>
    <div class="tool-box">
      <template v-if="tagIdList.length !== 0">
        <el-radio-group v-model="showMode" size="small">
          <el-radio-button label="体系"></el-radio-button>
          <el-radio-button label="画像"></el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="saveTemp">
          <icon-svg name="iconSave"></icon-svg>
          <span>保存模板</span>
        </el-button>
      </template>
      <el-button type="primary" @click="goMode">
        <icon-svg name="iconReturn"></icon-svg>
        <span>返回</span>
      </el-button>
    </div>
    <template v-if="tagIdList.length !== 0">
      <div class="type-box tag-scrollbar" v-if="showMode === '体系'">
        <div class="type-item" v-for="(item, typeIndex) in typeList" :key="item.typeName">
          <div class="type-name">{{ item.typeName }}</div>
          <div class="tag-box clearfix">
            <div class="type-tag" v-for="(tag, tagIndex) in item.tagList" :key="tag.tagId">
              <span>{{ `${tag.tagName}：${tag.tagValue}` }}</span>
              <i class="el-icon-error" @click="removeTag(item.typeName, tagIndex, tag, typeIndex)"></i>
            </div>
          </div>
        </div>
        <div class="type-item" v-if="unfiledList.length > 0">
          <div class="type-name">未分类</div>
          <div class="tag-box clearfix">
            <div class="type-tag" v-for="(tag, tagIndex) in unfiledList" :key="tag.tagId">
              <span>{{ `${tag.tagName}：${tag.tagValue}` }}</span>
              <i class="el-icon-error" @click="removeTag(item.typeName, tagIndex, tag)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="portrait-box" v-if="showMode === '画像'">
        <img class="portrait-user-img" src="~@/assets/img/portrait-user.png" alt="" />
        <div class="portrait-tag-box">
          <div class="type-item" v-for="(item, typeIndex) in typeList" :key="item.typeName">
            <div class="type-tag" v-for="(tag, tagIndex) in item.tagList" :key="tag.tagId">
              <span>{{ `${tag.tagName}：${tag.tagValue}` }}</span>
              <i class="el-icon-error" @click="removeTag(item.typeName, tagIndex, tag, typeIndex)"></i>
            </div>
          </div>
          <div class="type-item" v-if="unfiledList.length > 0">
            <div class="type-tag" v-for="(tag, tagIndex) in unfiledList" :key="tag.tagId">
              <span>{{ `${tag.tagName}：${tag.tagValue}` }}</span>
              <i class="el-icon-error" @click="removeTag(item.typeName, tagIndex, tag)"></i>
            </div>
          </div>
        </div>
      </div>
    </template>
    <tag-tmpl-drawer :tmplType="2" ref="saveDrawer"></tag-tmpl-drawer>
  </div>
</template>

<script>
// import saveDrawer from './content-tag-save-drawer'
export default {
  // components: {
  //   saveDrawer
  // },
  props: {
    identifyTagId: {
      type: String,
      required: true,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showMode: '体系',
      loading: false,
      tagIdList: [],
      indexObj: {},
      typeList: [],
      unfiledList: []
    }
  },
  methods: {
    clearConfig() {
      this.tagIdList = []
      this.indexObj = {}
      this.unfiledList = []
    },
    userIdChange() {
      if (this.tagIdList.length === 0) return
      this.addTag(this.tagIdList, true)
    },
    allowDrag(event) {
      event.preventDefault()
    },
    copyDrop(event) {
      event.preventDefault()
      const tagId = event.dataTransfer.getData('tagId')
      if (!tagId) return
      this.addTag([tagId])
    },
    addTag(list, cover = false) {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tagUserPortrait/getUserPortraitInfo'),
        method: 'post',
        data: this.$ajax.setData({
          identifyTagId: this.identifyTagId,
          userId: this.userId,
          tagList: list
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (cover) {
            this.coverData(data.data)
          } else {
            this.setData(data.data)
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    coverData(list) {
      let obj = {}
      let typeList = []
      list.forEach(item => {
        if (!obj[item.tagCategory]) {
          obj[item.tagCategory] = []
          if (item.tagCategory === '未分类') {
            this.unfiledList = obj[item.tagCategory]
          } else {
            typeList.push({
              typeName: item.tagCategory,
              tagList: obj[item.tagCategory]
            })
          }
        }
        obj[item.tagCategory].push({
          tagId: item.tagId,
          tagName: item.assetNm,
          tagValue: item.tagValue || ''
        })
      })
      this.indexObj = obj
      this.typeList = typeList
    },
    setData(list) {
      list.forEach(item => {
        if (this.tagIdList.indexOf(item.tagId) !== -1) {
          this.$message.warning(`标签【${item.assetNm}】已存在`)
          return
        }
        this.tagIdList.push(item.tagId)
        if (!this.indexObj[item.tagCategory]) {
          this.indexObj[item.tagCategory] = []
          if (item.tagCategory === '未分类') {
            this.unfiledList = this.indexObj[item.tagCategory]
          } else {
            this.typeList.push({
              typeName: item.tagCategory,
              tagList: this.indexObj[item.tagCategory]
            })
          }
        }
        this.indexObj[item.tagCategory].push({
          tagId: item.tagId,
          tagName: item.assetNm,
          tagValue: item.tagValue || ''
        })
      })
    },
    removeTag(typeName, tagIndex, tag, typeIndex = null) {
      this.$confirm(`确认移除标签【${tag.tagName}】？`)
        .then(() => {
          this.tagIdList.splice(this.tagIdList.indexOf(tag.tagId), 1)
          this.indexObj[typeName].splice(tagIndex, 1)
          if (this.indexObj[typeName].length === 0) {
            if (typeIndex !== null) this.typeList.splice(typeIndex, 1)
            this.indexObj[typeName] = null
          }
        })
        .catch(() => {})
    },
    saveTemp() {
      this.$refs.saveDrawer.showDrawer({ json: JSON.stringify(this.tagIdList) })
    },
    goMode() {
      this.$emit('mode', 'mode')
    }
  }
}
</script>

<style lang="scss">
.tag-portrait {
  .content-tag {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    .no-data-box {
      width: 400px;
      height: 300px;
      color: #999;
      border: 2px dashed #c0d2f6;
      text-align: center;
      border-radius: 5px;
      margin: 150px auto;
      .plus-box {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 2px solid #999;
        text-align: center;
        border-radius: 5px;
        margin: 100px auto 20px;
        i {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .tool-box {
      position: absolute;
      top: 0;
      right: 0;
      .el-button {
        font-size: 15px;
        color: #455fbc;
        background-color: transparent;
        border-color: transparent;
        padding: 10px 4px;
        margin-left: 10px;
        svg {
          font-size: 20px;
          width: 20px;
          height: 20px;
          margin-right: 3px;
          margin-top: -5px;
          vertical-align: middle;
        }
      }
    }
    .type-box {
      width: 100%;
      height: calc(100% - 50px);
      margin-top: 50px;
      padding: 0 20px;
      overflow-y: auto;
      .type-item {
        margin-bottom: 10px;
        .type-name {
          font-size: 26px;
          font-weight: bold;
          line-height: 50px;
          border-bottom: 1px solid #333;
          margin-bottom: 10px;
        }
      }
    }
    .portrait-box {
      position: relative;
      width: 100%;
      height: calc(100% - 50px);
      margin-top: 50px;
      .portrait-user-img {
        position: absolute;
        top: 5%;
        left: -10%;
        width: 80%;
        max-width: 950px;
      }
      .portrait-tag-box {
        position: absolute;
        top: 120px;
        left: 600px;
      }
    }

    .type-tag {
      position: relative;
      float: left;
      border-radius: 4px;
      padding: 10px 18px;
      font-size: 16px;
      font-weight: bold;
      margin-right: 20px;
      margin-bottom: 20px;
      transition: all 0.2s linear;
      .el-icon-error {
        display: none;
        position: absolute;
        top: 11px;
        right: 7px;
        cursor: pointer;
      }
      &:hover {
        padding-right: 30px;
        margin-right: 8px;
        .el-icon-error {
          display: block;
        }
      }
    }
    .type-item {
      &:nth-child(4n + 1) {
        .type-tag {
          background-color: rgb(235, 247, 232);
          color: rgb(127, 203, 104);
        }
      }
      &:nth-child(4n + 2) {
        .type-tag {
          background-color: rgb(232, 238, 253);
          color: rgb(64, 158, 255);
        }
      }
      &:nth-child(4n + 3) {
        .type-tag {
          background-color: rgb(254, 244, 236);
          color: rgb(248, 173, 108);
        }
      }
      &:nth-child(4n + 4) {
        .type-tag {
          background-color: rgb(253, 240, 239);
          color: rgb(241, 127, 122);
        }
      }
    }
  }
}
</style>
